<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" th:href="@{/static/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/css/layui.css}" media="all">
    <style>
        .layui-panel{
            height: 100%;
        }
        .my-panel{
            margin-top: 50px;
        }
        .my-panel li {
            text-align: center;
            height: 50px;
            line-height: 50px;
            background-color: #28333E;
            color: rgb(191, 187, 187);
        }
        .my-panel li.active {
            color: #FFFFFF;
            background-color: #1e9fff;
        }
        .my-panel li:hover {
            cursor: pointer;
            color: #FFFFFF;
            background-color: #cccccc;
        }
        .my-badge{
            padding: 3px;
            width: 100px;
            height: 20px;
        }
        .room-container{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .room-container .room-parent{
            height: 200px;
            flex-basis: 150px;
            margin: 10px;
            box-shadow: 2px 2px 2px 2px #ccc;
        }
        .room-container .room{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-xs2">
        <div class="layui-panel my-panel">
            <div style="padding: 32px;">
                <ul>
                    <li th:each="item : ${floorList}" th:class="${item.value == '1'? 'active':''}" th:attr="data-id=${item.value}" th:text="${item.name}"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-col-xs10">
        <div class="layui-panel">
            <div class="layui-row">
                <div class="layui-col-xs8 layui-col-xs-offset4">
                    <span th:each="item : ${roomStatusList}" th:classappend="${'layui-bg-' + item.remarks}" class="layui-badge my-badge"  th:text="${item.name}"></span>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 room-container">
                    <div class="room-parent" th:each="item : ${roomList}" >
                        <div th:each="statusItem : ${roomStatusList}" th:if="${item.roomState} == ${statusItem.value}" th:text="${item.roomNum}" class="room" th:classappend="'layui-bg-' + ${statusItem.remarks}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
    let ctx = [[${#httpServletRequest.getContextPath()}]];
    let roomStatusList = /*[[${roomStatusList}]]*/ [];
</script>
<script>
    window.onload = function (){
        $(".my-panel li").click(function(e){
            console.log(this.dataset.id);
            $(".active").removeClass("active");
            this.classList.add("active");
            // 发送请求，请求房间信息
            $.ajax({
                url: ctx + '/checkin/roomList',
                type: 'get',
                data: {
                    floor: this.dataset.id
                },
                success: function (data){
                    console.log(data);
                    console.log(roomStatusList)
                    // 添加元素
                    let roomContainer = document.querySelector(".room-container");
                    let html = '';
                    for(let item of data.data){
                        for(let status of roomStatusList){
                            if (item.roomState == status.value){
                                html += `
                                    <div class="room-parent">
                                        <div  class="room layui-bg-${status.remarks}">
                                            ${item.roomNum}
                                        </div>
                                    </div>`;
                            }
                        }
                    }
                    roomContainer.innerHTML = html;

                }
            })
        });
        // var listOfLi = document.querySelectorAll(".my-panel li");
        //
        // console.log(listOfLi)
        //
        //
        // for (let item of listOfLi){
        //     item.onclick = function (){
        //         console.log(this)
        //     }
        // }
    }
</script>
</body>
</html>